<template>
	<view class="my-course">
		<!-- tab切换部分 -->
		<header-user
			:index="pageObj.tabIndex"
			:tabList="pageObj.tabList"
			@tabClick="tabClick">
		</header-user>
		
		<swiper
			class="body-swiper"
			:style="{height: pageObj.screenHeight + 'px'}"
			:current="pageObj.tabIndex"
			@change="bodySwiperChange">
			
			<!-- 我的在线课 -->
			<swiper-item class="body-swiper-item">
				<view class="block" v-if="dataObj.onlineObj.list.length">
					<!-- <view class="header">
						<span>在线课</span>
						<view
							class="btn"
							:class="dataObj.onlineObj.manage ? '' : 'manage'"
							@click="onManageTap">
							{{dataObj.onlineObj.manage ? '完成' : '管理'}}
						</view>
					</view> -->
					<!-- 列表 -->
					<view class="list">
						<view class="item" v-for="item in dataObj.onlineObj.list" :key="item.goods_id">
							<!-- 选中 -->
							<view
								class="select"
								:class="item.selected ? 'selected' : ''"
								v-if="dataObj.onlineObj.manage"
								@click="item.selected = !item.selected">
							</view>
							<!-- 内容 -->
							<view  class="content" @click="onPageTap(item.goods_id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-2">{{item.name}}</view>
								<!-- 进度条 -->
								<progress-bar :progress="Number((item.onclassPercent * 100).toFixed(2))"></progress-bar>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			
			<!-- 我的线下课 -->
			<swiper-item class="body-swiper-item">
				<view class="block" v-if="dataObj.offlineObj.list.length">
					<!-- <view class="header">
						<span>线下课</span>
						<view
							class="btn"
							:class="dataObj.offlineObj.manage ? '' : 'manage'"
							@click="onManageTap">
							{{dataObj.offlineObj.manage ? '完成' : '管理'}}
						</view>
					</view> -->
					<!-- 列表 -->
					<view class="list">
						<view class="item" v-for="item in dataObj.offlineObj.list" :key="item.goods_id">
							<!-- 选中 -->
							<view
								class="select"
								:class="item.selected ? 'selected' : ''"
								v-if="dataObj.offlineObj.manage"
								@click="item.selected = !item.selected">
							</view>
							<!-- 内容 -->
							<view  class="content" @click="onPageTap(item.goods_id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-2">{{item.name}}</view>
								<!-- 进度条 -->
								<progress-bar :progress="Number((item.onclassPercent * 100).toFixed(2))"></progress-bar>
								<!-- <view class="expire">到期：{{item.expire}}</view> -->
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 底部删除 -->
		<view class="footer" v-if="pageObj.showDel">
			<view class="select-all" :class="pageObj.isALL ? 'selected' : ''" @click="onSelectAllTap">全选</view>
			<view class="number">共选中 {{sum || 0}} 门</view>
			<view class="btn" @click="onDelTap">删除</view>
		</view>
	</view>
</template>

<script>
	import headerUser from '@/components/header/header-user.vue';
	import progressBar from '@/components/progress-bar/progress-bar.vue';
	
	export default {
		components: {
			headerUser,
			progressBar
		},
		data() {
			return {
				pageObj: {
					screenHeight: 0,
					tabIndex: 0,
					tabList: [{
						name: '我的在线课',
						key: 'onlineObj'
					}, {
						name: '我的线下课',
						key: 'offlineObj'
					}],
					isALL: false,
					showDel: false
				},
				dataObj: {
					// 我的在线课
					onlineObj: {
						manage: false,
						list: []
					},
					// 我的线下课
					offlineObj: {
						manage: false,
						list: []
					}
				},
			}
		},
		computed: {
			// 选中商品数量
			sum: function() {
				if (!this.pageObj['showDel']) return false;
				let sum = 0;
				const key = this.getPageKey();
				const list = this.dataObj[key]['list']; // 获取操作的数组
				for(let i in list){
					const item = list[i];
					if (item['selected']) {
						sum++;
					}
				}
				return sum;
			}
		},
		onShow() {
			this.getData();
		},
		onLoad() {
			this.getScreenHeight();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取屏幕高度，并设置swiper 的高度
			getScreenHeight () {
				uni.getSystemInfo({
				    success: res => {
						this.pageObj['screenHeight'] = res['screenHeight'] - 100;
				    }
				});
			},
			// 监听头部子组件的点击事件
			tabClick (index) {
				this.pageObj.tabIndex = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				const key = this.getPageKey();
				this.dataObj[key]['manage'] = false;
				this.pageObj.tabIndex = event.detail.current;
				this.pageObj.showDel = false;
				this.getData();
			},
			// 管理事件
			onManageTap() {
				const key = this.getPageKey();
				// 处理管理字段
				this.dataObj[key]['manage'] = !this.dataObj[key]['manage'];
				// 显示底部删除按钮
				this.pageObj.showDel = true;
			},
			// 页面跳转
			onPageTap(id) {
				uni.navigateTo({
					url: './video?id=' + id
				});
			},
			// 全选
			onSelectAllTap() {
				const key = this.getPageKey();
				const list = this.dataObj[key]['list']; // 获取操作的数组
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				for(let i in list){
					if (!list[i]['selected']) {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = true;
					for(let i in list){
						list[i]['selected'] = true;
					}
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = false;
					for(let i in list){
						list[i]['selected'] = false;
					}
				}
			},
			// 删除
			onDelTap() {
				const key = this.getPageKey();
				const list = this.dataObj[key]['list'];
			},
			// 获取页面key 值
			getPageKey() {
				const index = this.pageObj['tabIndex'];
				const key = this.pageObj['tabList'][index]['key'];
				return key;
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['getmy'],
					data: {
						cat_type: 1, // 1课程 2培训 3书籍 4题库 5充值
						on_off: this.pageObj['tabIndex'] ? 0 : 1
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						if (this.pageObj['tabIndex']) {
							// 我的线下课
							this.dataObj['offlineObj']['list'] = data || [];
						} else {
							// 我的在线课
							this.dataObj['onlineObj']['list'] = data || [];
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.my-course{
		padding-bottom: 90rpx;
		
		// 头部自组件位置
		// #ifndef APP-PLUS
		.header-user{
			top: 88rpx;
		}
		// #endif
		// 轮播
		.body-swiper{
			// display: none;
			position: relative;
			box-sizing: border-box;
			height: 100%;
			padding-top: 98rpx;
			&-item{
				overflow-y: scroll;
				overflow-x: hidden;
				.block{
					.header{
						line-height: 44rpx;
						font-size: 32rpx;
						color: #1A1A1A;
						.btn{
							float: right;
							position: relative;
							padding-left: 42rpx;
							color: $color-common;
						}
						.manage{
							color: #373737;
							&::before{
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								width: 32rpx;
								height: 44rpx;
								background-repeat: no-repeat;
								background-position: center;
								background-size: 32rpx 32rpx;
								background-image: url(../../../static/images/common/manage.png);
							}
						}
					}
				}
				// 视频列表
				.list{
					.item{
						display: flex;
					}
					.select{
						width: 62rpx;
						height: 70rpx;
						background-repeat: no-repeat;
						background-position: center bottom;
						background-size: 40rpx 40rpx;
						background-image: url(../../../static/images/cart/select.png);
					}
					.selected{
						background-image: url(../../../static/images/cart/selected.png);
					}
					.content{
						flex: 1;
						position: relative;
						padding: 30rpx 0 76rpx 278rpx;
						.cover{
							position: absolute;
							top: 30rpx;
							left: 0;
							width: 254rpx;
							height: 156rpx;
							background-color: #eee;
							border-radius: 14rpx;
						}
						.title{
							height: 80rpx;
							line-height: 40rpx;
							font-size: 26rpx;
							color: #1A1A1A;
							margin-bottom: 16rpx;
						}
						.expire{
							position: absolute;
							bottom: 18rpx;
							left: 0;
							line-height: 40rpx;
							font-size: 22rpx;
							color: #7F7F7F;
							padding-left: 40rpx;
							&::before{
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								width: 40rpx;
								height: 40rpx;
								background-position: center;
								background-repeat: no-repeat;
								background-size: 29rpx 29rpx;
								background-image: url(../../../static/images/classify/clock.png);
							}
						}
					}
				}
			}
		}
		
		.footer{
			box-sizing: border-box;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 10rpx 200rpx 10rpx 36rpx;
			background-color: #FFFFFF;
			.select-all{
				float: left;
				position: relative;
				line-height: 70rpx;
				width: 66rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-left: 48rpx;
				margin-right: 14rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -20rpx;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -18rpx;
					right: 0;
					width: 1rpx;
					height: 36rpx;
					background-color: #E4EAED;
				}
			}
			.selected{
				&::before{
					background-image: url(../../../static/images/cart/selected.png);
				}
			}
			.number{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #7F7F7F;
			}
			.btn{
				position: absolute;
				top: 10rpx;
				right: 36rpx;
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: #373737;
				border-radius: 35rpx;
			}
		}
	}
</style>
